<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>防止table变形 td固定宽度</title>
    <style type="text/css">
        .wrapper {
            width: 900px;
            margin: 100px auto;
            padding: 20px;
            box-shadow: 0 2px 5px 0px rgba(0, 0, 0, .3);
        }

        table {
            /*为表格设置合并边框模型*/
            border-collapse: collapse;
            /*列宽由表格宽度和列宽度设定*/
            table-layout: fixed;
            width: 100%;
        }

        td {
            border: 1px solid #ddd;
            /*允许在单词内换行。*/
            word-break: break-word;
            /*设置宽度*/
           /*  width: 100px; */
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <table>
            <tr>
                <td>DataDataDataDataDataDataDataDataDataDataDataData123</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
        </table>
    </div>
</body>

</html>